<template>
	<view class="bargain-container">
		<view class="banner">
			邀请好友砍价 低至1元购
		</view>

		<!-- 我的砍价 -->
		<text class="section-title">我的砍价</text>
		<view class="my-bargain-container" v-if="myBargains.length > 0">
			<view class="bargain-list">
				<view class="bargain-item" v-for="item in myBargains" :key="item.id" @click="goBargainDetail(item.id)">
					<image class="bargain-image" :src="item.image" mode="aspectFill"></image>
					<view class="bargain-info">
						<text class="bargain-name">{{ item.name }}</text>
						<view class="bargain-price">
							<text class="current-price">¥{{ item.currentPrice }}</text>
							<text class="original-price">¥{{ item.originalPrice }}</text>
						</view>
						<view class="bargain-status">
							<text :class="['status-tag', 'status-' + item.status]">{{ getStatusText(item.status)
							}}</text>
							<text class="status-time">{{ item.statusTime }}</text>
						</view>
						<button class="bargain-button" @click.stop="checkBargainStatus(item.id)">查看详情</button>
					</view>
				</view>
			</view>
		</view>
		<view class="empty-bargains" v-else>
			<view class="empty-icon">🛒</view>
			<text class="empty-text">您还没有参与任何砍价</text>
			<button class="empty-button" @click="scrollToHotBargains">去看看热门砍价</button>
		</view>

		<!-- 倒计时 -->
		<view class="countdown-container">
			<text class="countdown-title">本场砍价结束还剩</text>
			<view class="countdown">
				<view class="countdown-box">{{ countdown.hours }}</view>
				<text class="countdown-separator">:</text>
				<view class="countdown-box">{{ countdown.minutes }}</view>
				<text class="countdown-separator">:</text>
				<view class="countdown-box">{{ countdown.seconds }}</view>
			</view>
		</view>

		<view class="section-title">热门砍价</view>
		<view class="bargain-list">
			<view class="bargain-item" v-for="(item, index) in bargainItems" :key="index">
				<view>
					<image class="item-image" :src="item.image" mode="aspectFill"></image>
				</view>
				<view class="item-info">
					<view class="item-name">{{ item.name }}</view>
					<view class="bargain-price">
						<text class="current-price">¥{{ item.currentPrice }}</text>
						<text class="original-price">¥{{ item.originalPrice }}</text>
					</view>
					<view class="lowest-price">最低可砍至¥{{ item.lowestPrice }}</view>
					<button class="item-button">去砍价</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import {
	ref,
	onMounted,
	onUnmounted
} from 'vue'

// 倒计时数据
const countdown = ref({
	hours: '01',
	minutes: '23',
	seconds: '45'
})

// 我的砍价数据
const myBargains = ref([{
	id: 1,
	name: '北欧风格简约陶瓷花瓶摆件',
	image: 'https://images.unsplash.com/photo-1607082348824-0a96f2a4b9da?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80',
	currentPrice: '29.9',
	originalPrice: '59.9',
	status: 'processing',
	statusTime: '剩余12小时23分',
},
{
	id: 2,
	name: '多功能厨房收纳置物架',
	image: 'https://images.unsplash.com/photo-1607082348824-0a96f2a4b9da?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80',
	currentPrice: '39.9',
	originalPrice: '69.9',
	status: 'success',
	statusTime: '已砍成功',
},
{
	id: 3,
	name: '便携式旅行化妆包',
	image: 'https://images.unsplash.com/photo-1607082348824-0a96f2a4b9da?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80',
	currentPrice: '29.9',
	originalPrice: '49.9',
	status: 'failed',
	statusTime: '未达成',
}
])

// 当前查看的砍价商品
const currentBargain = ref(myBargains.value[0])

// 热门砍价商品
const bargainItems = ref([{
	image: 'https://images.unsplash.com/photo-1607082348824-0a96f2a4b9da?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80',
	name: '多功能厨房收纳置物架',
	currentPrice: '39.9',
	originalPrice: '69.9',
	lowestPrice: '1'
},
{
	name: '便携式旅行化妆包',
	currentPrice: '29.9',
	originalPrice: '49.9',
	lowestPrice: '5'
},
{
	name: '创意桌面小台灯',
	currentPrice: '49.9',
	originalPrice: '79.9',
	lowestPrice: '9.9'
},
{
	name: '日式简约餐具套装',
	currentPrice: '59.9',
	originalPrice: '99.9',
	lowestPrice: '19.9'
}
])

// 获取砍价状态文本
const getStatusText = (status) => {
	switch (status) {
		case 'processing':
			return '砍价中'
		case 'success':
			return '砍价成功'
		case 'failed':
			return '砍价失败'
		default:
			return '未知状态'
	}
}

// 查看砍价状态
const checkBargainStatus = (id) => {
	uni.navigateTo({
		url: `/pages/bargain/status?id=${id}`
	})
}

// 滚动到热门砍价
const scrollToHotBargains = () => {
	uni.pageScrollTo({
		selector: '.section-title',
		duration: 300
	})
}

// 跳转砍价详情
const goBargainDetail = (id) => {
	uni.navigateTo({
		url: `/pages/bargain/detail?id=${id}`
	})
}

let timer = null

// 倒计时逻辑
const startCountdown = () => {
	let hours = 1
	let minutes = 23
	let seconds = 45

	timer = setInterval(() => {
		seconds--

		if (seconds < 0) {
			seconds = 59
			minutes--
		}

		if (minutes < 0) {
			minutes = 59
			hours--
		}

		if (hours < 0) {
			clearInterval(timer)
			return
		}

		countdown.value = {
			hours: hours.toString().padStart(2, '0'),
			minutes: minutes.toString().padStart(2, '0'),
			seconds: seconds.toString().padStart(2, '0')
		}
	}, 1000)
}

onMounted(() => {
	startCountdown()
})

onUnmounted(() => {
	if (timer) {
		clearInterval(timer)
	}
})
</script>

<style lang="scss" scoped>
.bargain-container {
	padding: 15px;
	padding-bottom: 70px;
	background-color: #f8f8f8;
	min-height: 100vh;
}

.banner {
	width: 100%;
	height: 150px;
	background-color: #ff9500;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	font-size: 24px;
	font-weight: bold;
	margin-bottom: 15px;
	background-image: linear-gradient(to right, #ff9500, #ffcc00);
}

.section-title {
	font-size: 18px;
	font-weight: 600;
	margin: 15px 0 10px;
	color: #333;
	display: block;
}

.my-bargain-container {
	margin-bottom: 15px;
}

.countdown-container {
	background-color: #fff;
	border-radius: 12px;
	padding: 15px;
	margin-bottom: 15px;
	display: flex;
	align-items: center;
	justify-content: space-between;

	.countdown-title {
		font-size: 16px;
		font-weight: 600;
		color: #333;
	}

	.countdown {
		display: flex;
		align-items: center;

		.countdown-box {
			background-color: #333;
			color: white;
			border-radius: 4px;
			padding: 2px 4px;
			margin: 0 2px;
			font-size: 12px;
			font-weight: 600;
			min-width: 20px;
			text-align: center;
		}

		.countdown-separator {
			color: #333;
			margin: 0 2px;
			font-weight: 600;
		}
	}
}

.bargain-list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
}

.bargain-item {
	background-color: #fff;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);

	.bargain-image {
		width: 100%;
		height: 120px;
		background-color: #eee;
		object-fit: cover;
	}

	.bargain-info {
		padding: 10px;

		.bargain-name {
			font-size: 14px;
			font-weight: 500;
			margin-bottom: 5px;
			color: #333;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
			overflow: hidden;
			min-height: 40px;
		}

		.bargain-status {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 5px;
			font-size: 12px;

			.status-tag {
				padding: 2px 6px;
				border-radius: 10px;
				font-size: 10px;
				color: white;
			}

			.status-processing {
				background-color: #2196F3;
			}

			.status-success {
				background-color: #4CAF50;
			}

			.status-failed {
				background-color: #9E9E9E;
			}

			.status-time {
				color: #666;
				font-size: 10px;
			}
		}

		.bargain-button {
			background-color: #ff9500;
			color: white;
			border: none;
			border-radius: 15px;
			padding: 5px 10px;
			font-size: 12px;
			margin-top: 8px;
			width: 100%;
		}
	}
}

.bargain-price {
	display: flex;
	align-items: baseline;

	.current-price {
		font-size: 16px;
		font-weight: 600;
		color: #ff9500;
	}

	.original-price {
		font-size: 12px;
		color: #999;
		text-decoration: line-through;
		margin-left: 5px;
	}
}

.empty-bargains {
	background-color: #fff;
	border-radius: 12px;
	padding: 30px 15px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	margin-top: 10px;

	.empty-icon {
		font-size: 40px;
		margin-bottom: 10px;
		color: #ddd;
	}

	.empty-text {
		color: #999;
		font-size: 14px;
		margin-bottom: 15px;
	}

	.empty-button {
		background-color: #ff9500;
		color: white;
		border: none;
		border-radius: 20px;
		padding: 8px 20px;
		font-size: 14px;
	}
}

.item-image {
	width: 100%;
	height: 120px;
	background-color: #eee;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #999;
}

.item-info {
	padding: 10px;
}

.item-name {
	font-size: 14px;
	font-weight: 500;
	margin-bottom: 5px;
	color: #333;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.item-price {
	display: flex;
	align-items: baseline;
}

.lowest-price {
	font-size: 12px;
	color: #ff9500;
	margin-top: 5px;
}

.item-button {
	background-color: #ff9500;
	color: white;
	border: none;
	border-radius: 15px;
	padding: 5px 10px;
	font-size: 12px;
	margin-top: 5px;
	width: 100%;
}
</style>